<template>
  <view class="navbar">
    <u-navbar style="margin-top: 10px;" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" :fixed="true">
      <view slot="left" style="display: flex;">
        <u-icon name="arrow-left" size="24"></u-icon>
      </view>
      <view slot="center" :style="{marginRight:menuButtonWidth +10+'px'}">
        <view class="flex item-center" :style="{width:titleWidth+'px'}">
          <text class="title line-1 f_1">{{ title }}</text>
          <view style="position: relative;" class="fs_0">
            <image class="setUp-img" src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/setUp.svg"
                   @click="isSetUp = !isSetUp"/>
            <view v-if="isSetUp" class="set-box">
              <view class="font-set" @click="fontModal = true">
                <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/font.svg"/>
                <text>字号设置</text>
              </view>
              <view class="calculator-set" @click="showCalculator">
                <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/cognPractice/calculator.svg"/>
                <text>计算器</text>
              </view>
              <view class="flex flex-row around">
                <text>自动换题</text>
                <u-switch v-model="automatic" activeColor="#37B874" size="20" @change="automaticChange"></u-switch>
              </view>
              <view class="flex flex-row around" style="margin-top: 15px" v-if="isAnswerShow">
                <text>显示答案</text>
                <u-switch v-model="isAnswer" activeColor="#37B874" size="20" @change="isAnswerChange"></u-switch>
              </view>
            </view>
          </view>
        </view>

      </view>
    </u-navbar>
    <u-popup mode="bottom" :show="calculatorShow" ref="calculator" closeable maskCloseable @close="showCalculator">
      <view class="flex justify-center item-end" style="width: 100%; height: 100%;">
        <view style="width: 90%; height: 72vh;padding-top:5vh">
          <h-calculator @closeCalculatorPopup="showCalculator"/>
        </view>
      </view>
    </u-popup>

    <u-popup :show="fontModal" mode="bottom" @close="fontModal = false; isSetUp = false" :round="10" closeable>
      <view style="padding: 40rpx;align-items: center;text-align: center;">
        <view>
          字号设置
        </view>
        <view class="flex item-center" style="width: 100%;">
          <image style="width: 40rpx;height: 40rpx;margin-top: -20rpx;" src="../../../static/images/narrow.svg"
                 @click="editFontSize(false)"></image>
          <view style="width: 80%;margin: 60rpx 0;">
            <u-steps :current="current" dot activeColor="#37B874">
              <u-steps-item title="较小"></u-steps-item>
              <u-steps-item title="标准"></u-steps-item>
              <u-steps-item title="中等"></u-steps-item>
              <u-steps-item title="较大"></u-steps-item>
              <u-steps-item title="特大"></u-steps-item>
            </u-steps>
          </view>
          <image style="width: 40rpx;height: 40rpx;margin-top: -20rpx;" src="../../../static/images/enlarge.svg"
                 @click="editFontSize(true)"></image>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
export default {
  name: "navbar",
  props: {
    title: {
      type: String,
      default: "试题练习"
    },
    //是否支持展示此按钮
    isAnswerShow: {
      default: false,
      type: Boolean
    },
    fontSize: {
      type: Number,
      default: 32
    }
  },
  data() {
    return {
      isSetUp: false, // 下拉
      automatic: false, //自动换题
      fontModal: false, // 放大缩小字体状态
      calculatorShow: false, // 计算器状态
      isAnswer: false,//是否显示答案
      current: 0,
      titleWidth: 0, //标题最大宽度
      menuButtonWidth: 0 //头部导航右边菜单宽度
    }
  },
  methods: {
    automaticChange() {
      this.$emit("updateAutomatic", this.automatic)
    },
    isAnswerChange(e) {
      this.$emit("updateIsAnswer", this.isAnswer)
    },
    showCalculator() { // 计算器
      if (!this.calculatorShow) {
        this.calculatorShow = true
      } else {
        this.isSetUp = false
        this.calculatorShow = false
      }
    },
    // 字体放大缩小
    editFontSize(type) {
      if (type) {
        if (this.current < 4) {
          this.current++
          const fontSize = (this.fontSize + 4) >= 52 ? 52 : (this.fontSize + 2)
          this.$emit("editFontSize", fontSize)
        }
      } else {
        if (this.current > 0) {
          this.current--
          const fontSize = (this.fontSize - 4) <= 20 ? 20 : (this.fontSize - 2)
          this.$emit("editFontSize", fontSize)
        }
      }
    },
    hide() {
      this.isSetUp = false
    }
  },
  mounted() {
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.menuButtonWidth = menuButtonInfo.width
    uni.getSystemInfo({
      success: (res) => {
        //窗口宽度- 右边菜单宽度-左边菜单宽度 -marginleft20
        this.titleWidth = res.windowWidth - menuButtonInfo.width - 44 - 20
      }
    })
  },
}
</script>
<style scoped lang="scss">
.navbar {
  .title {
    line-height: 27px;
    color: #000;
    width: 100%;
    margin: 0 20rpx;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    padding-right: 6%;
  }

  .setUp-img {
    width: 46rpx;
    height: 32px
  }

  .set-box {
    width: 240rpx;
    padding: 20rpx;
    box-shadow: 0px 0px 9px 0px #0000001A;
    position: absolute;
    top: 300rpx;
    right: -120rpx;
    background-color: #fff;

    .font-set {
      flex-direction: row;
      display: flex;
      justify-content: space-around;

      image {
        width: 32rpx;
        height: 36rpx;
      }

      text {
        margin-left: 20rpx;
        text-align: center;
        width: 60%;
      }
    }

    .calculator-set {
      flex-direction: row;
      display: flex;
      margin: 30rpx 0;
      justify-content: space-around;

      image {
        width: 32rpx;
        height: 36rpx;
      }

      text {
        margin-left: 20rpx;
        text-align: center;
        width: 62%;
      }
    }
  }
}

</style>